<template>
	<div class="s_C set_menu">
		<div class="menu_head">
			<p class="menu_title">menu</p>
			<div class="menu_setting"><img class="set_img" id="set_C" src="../../../../../assets/logo.png" alt="setting" /></div>
		</div>
		<div class="menu_content"><div class="content_info" id="ul_hell"></div></div>
	</div>
</template>

<script setup>
import { onMounted } from 'vue';
import { domTree } from './setMenu/setMenu.js';
import { nodeinfo } from './setMenu/menuTxt.js';
//挂載 目標
// let appendElID = 'content_info';

onMounted(() => {
	domTree(document.querySelector('.content_info'), nodeinfo);
	// let appendEl = document.getElementById(appendElID);
	// console.log(appendEl);
	// let reJsX = recUlJSX([
	// 	{
	// 		tag: 'ul',
	// 		id: 'a666',
	// 		onclick: function() {
	// 			console.log('点击事件');
	// 		}
	// 	}
	// ]);
	// appendEl.appendChild(reJsX);
});
// function recUlJSX(infos) {
// 	let reJsx;
// 	for (let i = 0; i < infos.length; i++) {
// 		reJsx = BuildElement(infos[i]);
// 	}
// 	function BuildElement(info) {
// 		let eluni = document.createElement(info['tag']);
// 		for (let s in info) {
// 			if (s == 'tag') {
// 				continue;
// 			}
// 			console.log(s);
// 			eluni[s] = info[s];
// 		}
// 		console.log(eluni);
// 		return eluni;
// 	}
// 	return reJsx;
// }
</script>

<style scoped lang="scss">
.set_menu {
	grid-area: menu;
	//自適應 内容 寬度
	width: fit-content;
	min-width: 200px;
}
.menu_head {
	display: flex;
	padding: 5px;
	justify-content: space-between;
}
.set_img {
	width: 20px;
	cursor: pointer;
}
.menu_content {
	padding: 0px 5px 5px;
}
.content_info {
	min-height: 200px;
}
</style>

<style>
summary p {
	cursor: pointer;
	display: inline-block;
}

summary::marker {
	content: '\0099';
}

li::marker {
	content: '|__';
}
li a {
	/* 文字的 动态 划线 */
	
	/* background: repeating-linear-gradient(red,blue,green);
	background-repeat: no-repeat;
	background-position-x: right;
	background-position-y: bottom;
	background-size: 0 2px;
	transition: background-size .2s ease-in-out; */
	
}
li a:hover {
	/* background-size: 100% 100%;
	background-position-x: left; */

	color: blueviolet;
	transition: color 0.2s ease-in-out .02s;
}
</style>
